﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Routes.aspx.cs" Inherits="GPSTrackingWebsiteManager.Pages.Routes" %>

<!DOCTYPE html>
<link href="../Css/GPSTrackingWebsite.css" rel="stylesheet" />
<script src="../Javascript/WindowMessageManager.js"></script>
<script src="../Javascript/ObjectsV2.js"></script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Administrador de Rutas</title>
</head>
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">
    
        var opener = GetRadWindow();
        var Routes = new Routes();

        var firstRouteHasGPSPoints = true;

        function GetRadWindow() {
            var oWindow = null;
            if (window.radWindow)
                oWindow = window.radWindow;
            else if (window.frameElement.radWindow)
                oWindow = window.frameElement.radWindow;
            return oWindow.BrowserWindow;
        }

        function loadRouteHistory() {
            if (Routes.isValidToLoadRoute(opener.globalGPSImei.imeiSelected, getDateSelected().get_textBox().value)) {
                requestStart(getrpvRoutesUpdateControl());
                Routes.enableDisableSliderRoute(false, getSliderRouter());
                getBtnLoadRoute().disabled = true;
                getBtnPlayPause().set_enabled(false);
                //FirstSelection
                firstRouteHasGPSPoints = true;
                PageMethods.wsLoadRouteHistory(opener.globalGPSImei.imeiSelected, getFormatDate(getDateSelected().get_textBox().value), true, loadRouteHistoryFirstSelectionOk, loadRouteHistoryFirstSelectionError);
            }
        }

        function loadRouteHistoryFirstSelectionOk(stringCollection) {
            if (stringCollection == "") {
                firstRouteHasGPSPoints = false;
            }

            Routes.openCollectionStringTrackDataByImeiFirsSelection(stringCollection, opener);
            //SecondSelection
            PageMethods.wsLoadRouteHistory(opener.globalGPSImei.imeiSelected, getFormatDate(getDateSelected().get_textBox().value), false, loadRouteHistorySecondSelectionOk, loadRouteHistorySecondSelectionError);
        }

        function loadRouteHistorySecondSelectionOk(stringCollection) {
            if (stringCollection == "") {
                if (!firstRouteHasGPSPoints) {
                    msgInformation("No hay rutas definidas para la fecha seleccionada.", titles.RoutesHistoryTitle);
                    getBtnLoadRoute().value = "Cargar Ruta";
                    getBtnLoadRoute().disabled = false;
                    responseEnd(getrpvRoutesUpdateControl());
                }
            }
            else {
                Routes.openCollectionStringTrackDataByImeiSecondSelection(stringCollection, opener);
            }

            getBtnLoadRoute().value = "Cargando... 1%";
            opener.globalRoutes.firstRoute = true;
            opener.objMapControl.routes = [];
            drawDrivingRoute(opener);
        }

        function loadRouteHistoryFirstSelectionError(error) {
            msgError(error.get_message());
            responseEnd(getrpvRoutesUpdateControl());
        }

        function loadRouteHistorySecondSelectionError(error) {
            msgError(error.get_message());
            responseEnd(getrpvRoutesUpdateControl());
        }

        function drawDrivingRoute(opener) {
            opener.globalRoutes.currentGpsPoint = 0;
            opener.globalRoutes.firstRoute = true;
            opener.objMapControl.clearStopsMarkers();
            opener.objMapControl.clearPeopleCounterMarkers();
            opener.globalRoutes.peopleTotalIn = -1;
            opener.globalRoutes.peopleTotalOut = -1;
            Routes.showHistoryRoute(opener);
            opener.globalRoutes.doesnWorkDrawRoute = false;
            opener.globalRoutes.lastOne = false;
            opener.globalRoutes.mtsRoute = opener.globalRoutes.mtsRouteStar;
            opener.globalRoutes.refreshIntervalId = setInterval(drawDrivingRouteTimer, 100);
            responseEnd(getrpvRoutesUpdateControl());
        }

        function drawDrivingRouteTimer() {

            if (opener.globalList.trackDataByImei.length > 1) {
                var lstart = 0;

                var existsMarker = false;
                var stopTimes = 0;
                var initialStop = 0;

                for (opener.globalRoutes.currentGpsPoint = opener.globalRoutes.currentGpsPoint; opener.globalRoutes.currentGpsPoint < opener.globalList.trackDataByImei.length - 2; opener.globalRoutes.currentGpsPoint++) {
                    getBtnLoadRoute().value = "Cargando..." + formatTwoDecimals((opener.globalRoutes.currentGpsPoint / opener.globalList.trackDataByImei.length) * 100) + "%";


                    /*if (opener.globalRoutes.peopleTotalIn == -1 && opener.globalRoutes.peopleTotalOut == -1) {
                        opener.globalRoutes.peopleTotalIn = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalIn;
                        opener.globalRoutes.peopleTotalOut = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalOut;
                    }*/
                    
                    if (opener.globalRoutes.peopleTotalIn != opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalIn || opener.globalRoutes.peopleTotalOut != opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalOut) {// && (opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalIn == opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].peopleTotalIn))){// || (opener.globalRoutes.peopleTotalOut != opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalOut && opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalOut == opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].peopleTotalOut)) {
                        var myPeopleCounterMarker = new PeopleCounterMarker();

                        myPeopleCounterMarker.setPeopleCounterMarker(opener.objMapControl.addPeopleCounterMarker(images.locationPeopleCounter, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].position, ""), opener.objMapControl.addInfoWindow(), opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleIn, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleOut, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalInside, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalIn, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalOut);

                        //if (!getCkbSiNoShowStops().checked) {
                        //    myStopMarker.stopMarker.setVisible(false);
                        //}

                        opener.globalList.peopleCounterMarkers.push(myPeopleCounterMarker);

                        opener.globalRoutes.peopleTotalIn = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalIn;
                        opener.globalRoutes.peopleTotalOut = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalOut;
                    }
                    
                    







                    if (lstart == 0) {
                        if (opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].currentKm - opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].currentKm >= opener.globalRoutes.mtsRoute) {
                            if (opener.globalRoutes.doesnWorkDrawRoute) {
                                opener.globalRoutes.doesnWorkDrawRoute = false;
                                lstart = 0;
                                opener.globalRoutes.destination = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].position;
                                opener.objMapControl.getDrivingRoute();
                                return;
                            }
                            else {
                                lstart = 1;
                                opener.globalRoutes.origin = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].position;
                                if (opener.globalList.stopsMarkers.length > 0 && opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop == null) {
                                    opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].hour;
                                }
                            }
                        }
                        else {
                            if (opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].currentKm - opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].currentKm < opener.globalRoutes.mtsStop) {
                                if (!existsMarker) {
                                    if (initialStop == 0) {
                                        initialStop = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].hour;
                                    }
                                    if (stopTimes > opener.globalRoutes.timesStop) {

                                        var myStopMarker = new StopMarker();

                                        myStopMarker.setStopMarker(opener.objMapControl.addStopMarker(images.locationStop, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].position, ""), opener.objMapControl.addInfoWindow(), initialStop);

                                        if (!getCkbSiNoShowStops().checked) {
                                            myStopMarker.stopMarker.setVisible(false);
                                        }

                                        opener.globalList.stopsMarkers.push(myStopMarker);

                                        existsMarker = true;
                                    }
                                    else {
                                        stopTimes++;
                                    }
                                }
                                else {
                                    if (opener.globalList.stopsMarkers.length > 0) {
                                        opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].hour;
                                    }
                                }
                            }
                        }
                    } else {
                        if ((opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].currentKm - opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].currentKm < opener.globalRoutes.mtsRoute) || (Routes.changeDirectionPosition(opener, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].position, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].position))) {
                            lstart = 0;
                            opener.globalRoutes.destination = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].position;

                            opener.objMapControl.getDrivingRoute();
                            return;
                        }
                    }
                }
                if (lstart = 1) {
                    opener.globalRoutes.destination = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].position;
                    opener.globalRoutes.lastOne = true;

                    if (opener.globalList.stopsMarkers.length > 0 && opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop == null) {
                        opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].hour;
                    }

                    setTimeout(opener.objMapControl.getDrivingRoute, 1000);
                }
                if (opener.globalList.stopsMarkers.length > 0) {
                    if (opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop == null) {
                        opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop = "No definida, continúa hasta el siguiente día.";//opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].hour;
                    }
                }
                drawDrivingRouteFinish();
            }


        }

        function drawDrivingRouteFinish() {
            clearInterval(opener.globalRoutes.refreshIntervalId);
            getBtnLoadRoute().value = "Cargar Ruta";
            getBtnLoadRoute().disabled = false;
            getBtnPlayPause().set_enabled(true);

            slider = getSliderRouter();
            slider.set_maximumValue(opener.globalList.trackDataByImei.length - 1);

            opener.globalRoutes.currentSlideRouteNumber = 0;

            if (opener.globalList.trackDataByImei.length > 0) {
                var imei = opener.globalGPSImei.imeiSelected//getImeiValueTreeVehicleSelected();
                var index = Routes.getIndexImei(opener.globalMasterPage.trackDataLastLocationList, imei);
                if (index != -1) {
                    opener.objMapControl.setIconMarker(opener.objMapControl.GPSImeiRoute, opener.globalMasterPage.trackDataLastLocationList[index].image);
                }

                updateCurrentPositionRouteHistory(opener.globalRoutes.currentSlideRouteNumber);

                slider.set_value(0);

                getlbKmFinal().innerHTML = formatTwoDecimals(opener.globalList.trackDataByImei[opener.globalList.trackDataByImei.length - 1].currentKm) + " kms";
                Routes.enableDisableSliderRoute(true, getSliderRouter());
            }
            else {
                Routes.enableDisableSliderRoute(false, getSliderRouter());
            }
        }        

        function ckbSiNoCenterRouteChecked() {
            opener.globalRoutes.isCenterRoute = getCkbSiNoCenterRoute().checked;
        }

        function ckbSiNoCenterGPSImeiChecked() {
            opener.globalRoutes.isCenterGPSImei = getCkbSiNoCenterGPSImei().checked;
        }

        function updateSlideVisibleSpeed(sender, args) {

            var slideValue = sender.get_value();
            opener.globalRoutes.speedRouteHistory = 1100 - (slideValue * 100);

            if (opener.globalRoutes.slideInterval != null) {
                window.clearInterval(opener.globalRoutes.slideInterval);
                opener.globalRoutes.slideInterval = null;
                opener.globalRoutes.slideInterval = window.setInterval('selectNextSlideRoute()', opener.globalRoutes.speedRouteHistory);
            }
        }

        function selectNextSlideRoute() {

            var slider = getSliderRouter();

            if (opener.globalRoutes.currentSlideRouteNumber < opener.globalList.trackDataByImei.length) {
                updateCurrentPositionRouteHistory(opener.globalRoutes.currentSlideRouteNumber);
            }

            var slideNumber = opener.globalRoutes.currentSlideRouteNumber + 1;
            if (slideNumber >= opener.globalList.trackDataByImei.length) {
                //getBtnPlayPause().checked = !getBtnPlayPause().checked;
                getBtnPlayPause().set_selectedToggleStateIndex(1);
                getBtnPlayPause().set_checked(false);
                stopSlideMovement();
            }
            else {
                slider.set_value(slideNumber);
            }
        }

        function updateCurrentPositionRouteHistory(slideNumber) {
            opener.objMapControl.setPositionMarker(opener.objMapControl.GPSImeiRoute, opener.globalList.trackDataByImei[slideNumber].position);
            getlbKmActual().innerText = formatTwoDecimals(opener.globalList.trackDataByImei[slideNumber].currentKm) + " kms";
            getlbKmTime().innerText = opener.globalList.trackDataByImei[slideNumber].hour;
            opener.objMapControl.getDirectionFromPosition(opener.globalList.trackDataByImei[slideNumber].position);
            getlbDirection().innerText = opener.globalRoutes.direction;
            centerMapChecked(opener.globalList.trackDataByImei[slideNumber].position);
        }

        function centerMapChecked(location) {
            if (opener.globalRoutes.isCenterGPSImei) {
                opener.objMapControl.centerMap(location);
            }
        }

        function updateSlideVisibleRoute(sender, args) {

            var slider = sender;

            updateSliderRoute(slider.get_value());

            if (opener.globalRoutes.currentSlideRouteNumber < opener.globalList.trackDataByImei.length) {
                updateCurrentPositionRouteHistory(opener.globalRoutes.currentSlideRouteNumber);
            }
        }

        function updateSliderRoute(slideNumber) {
            opener.globalRoutes.currentSlideRouteNumber = slideNumber;
        }

        function showHideHistoryRoute() {
            var ckbSiNoShowRoute = getCkbSiNoShowRoute();
            if (ckbSiNoShowRoute.checked) {
                Routes.showHistoryRoute(opener);
            }
            else {
                Routes.hideHistoryRoute(opener);
            }
        }

        function showOrhideStopsMarkers() {
            if (getCkbSiNoShowStops().checked) {
                Routes.showStopsMarkers(opener);
            }
            else {
                Routes.hideStopsMarkers(opener);
            }
        }

        function playStopSlideMovement(sender, args) {
            if (getBtnPlayPause().get_checked()) {
                playSlideMovement();
            }
            else {
                stopSlideMovement();
            }
            /*if (!args.get_checked()) {
                playSlideMovement();
            }
            else {
                stopSlideMovement();
            }*/
        }

        function playSlideMovement() {
            opener.globalRoutes.slideInterval = window.setInterval('selectNextSlideRoute()', opener.globalRoutes.speedRouteHistory);
        }

        function stopSlideMovement() {
            if (!opener.globalRoutes.slideInterval) return;
            window.clearInterval(opener.globalRoutes.slideInterval);
            opener.globalRoutes.slideInterval = null;
        }

        function getlbKmFinal() {
            return $get('<%= lbKmFinal.ClientID %>');//.innerText;
        }

        function getlbDirection() {
            return $get('<%= lbDirection.ClientID %>');//.innerText;
        }

        function getCkbSiNoCenterRoute() {
            return $get('<%= ckbSiNoCenterRoute.ClientID %>');
        }

        function getCkbSiNoCenterGPSImei() {
            return $get('<%= ckbSiNoCenterGPSImei.ClientID %>');
        }

        function getrpvRoutesUpdateControl() {
            return "<%= rpvRoutes.ClientID %>";
        }

        function getBtnLoadRoute() {
            return $get('btnCargarRuta');
        }

        function getBtnPlayPause() {
            return $find('<%= btnPlayPause.ClientID %>');
        }

        function getSliderRouter() {
            return $find('<%= RadSliderRoute.ClientID %>');
        }

        function requestStart(object) {
            try {
                $find("<%= RadAjaxLoadingPanel1.ClientID%>").show(object);
            }
            catch (e) {
                null;
            }
        }

        function responseEnd(object) {
            //hide the loading panel and clean up the global variables 
            try {
                $find("<%= RadAjaxLoadingPanel1.ClientID%>").hide(object);
            }
            catch (e) {
                null;
            }
        }

        function getDateSelected() {
            return $find('<%= dateSelected.ClientID %>');
        }

        function getCkbSiNoShowRoute() {
            return $get('<%= ckbSiNoShowRoute.ClientID %>');
        }

        function getlbKmActual() {
            return $get('<%= lbKmActual.ClientID %>');//.innerText;
        }

        function getlbKmTime() {
            return $get('<%= lbTime.ClientID %>');//.innerText;
        }

        function getCkbSiNoShowStops() {
            return $get('<%= ckbSiNoShowStops.ClientID %>');
        }

    </script>
</telerik:RadScriptBlock>
<body onload="">
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"  EnablePageMethods="true" EnablePartialRendering="true"></telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
				<telerik:AjaxSetting AjaxControlID="AjaxControlID1">
					<UpdatedControls>
						<telerik:AjaxUpdatedControl ControlID="Loading" LoadingPanelID="RadAjaxLoadingPanel1" />
					</UpdatedControls>
				</telerik:AjaxSetting>
			</AjaxSettings>
        </telerik:RadAjaxManager>
        
        
        <telerik:RadTabStrip ID="rtsRoutes" runat="server" SelectedIndex="0" MultiPageID="rmpRoutes" Skin="Metro"></telerik:RadTabStrip>
        <telerik:RadMultiPage ID="rmpRoutes" runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="rpvRoutes" runat="server">
                <table class="auto-style2">
					<tr>
						<td>
							<table>
								<tr>
									<td>
										<fieldset>
											<legend>Paso1. Seleccione la fecha</legend>
											<div style="height:50px; width: 171px;">
												<telerik:RadDatePicker ID="dateSelected" runat="server" style="text-align: center" Height="24px" Width="176px">
													<Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">
													</Calendar>
													<DateInput DateFormat="dd/MM/yyyy" DisplayDateFormat="dd/MM/yyyy" Height="24px" LabelWidth="40%">
													</DateInput>
												</telerik:RadDatePicker>
												<input id="btnCargarRuta" type="button" value="Cargar Ruta" onclick="loadRouteHistory();" />
                                                                
											</div>
										</fieldset>
									</td>
								</tr>
								<tr>
									<td>
										<div style="width: 171px;"></div>
									</td>
								</tr>
								<tr>
									<td>
										<fieldset>
											<legend>Velocidad</legend>
											<telerik:RadSlider ID="RadSliderSpeed" runat="server" Height="20px" ItemType="None" MaximumValue="11" MinimumValue="1" OnClientLoad="updateSlideVisibleSpeed" OnClientValueChanged="updateSlideVisibleSpeed" TrackPosition="Center" Value="1" Width="150px">
											</telerik:RadSlider>
										</fieldset>
									</td>
								</tr>
							</table>
                                                                    
						</td>
						<td>
							<fieldset>
								<legend>Paso 2. Reproducir ruta</legend>
								<table class="auto-style2" style="text-align: center; vertical-align: top;">
									<tr>
                                                                            
										<td>
											<asp:Label ID="lbKmActual" runat="server" style="text-align: center" Text="0.0 Km" Width="100px"></asp:Label>
										</td>
										<td>
											<telerik:RadSlider ID="RadSliderRoute" runat="server" Height="40px" ItemType="Tick" MaximumValue="100" OnClientLoad="updateSlideVisibleRoute" OnClientValueChanged="updateSlideVisibleRoute" TrackPosition="Center" Value="0" Width="600px">
											</telerik:RadSlider>
										</td>
										<td rowspan="3">
											<asp:CheckBox ID="ckbSiNoCenterGPSImei" runat="server" Text="Centrar GPS" Checked="true" onclick="javascript:ckbSiNoCenterGPSImeiChecked()" />
											<br />
											<asp:CheckBox ID="ckbSiNoShowRoute" runat="server" onclick="javascript:showHideHistoryRoute()" Text="Mostrar ruta" Checked="true"/>
											<br />
											<asp:CheckBox ID="ckbSiNoCenterRoute" runat="server" Text="Centrar Ruta" Checked="true" onclick="javascript:ckbSiNoCenterRouteChecked()"/>
											<br />
											<asp:CheckBox ID="ckbSiNoShowStops" runat="server" onclick="javascript:showOrhideStopsMarkers()" Text="Mostrar Donde se Detuvo" Checked="true"/>
										</td>
									</tr>
									<tr>
										<td>
											<asp:Label ID="lbKmFinal" runat="server" style="text-align: center" Text="0.0 Km" Width="100px"></asp:Label>
                                                                            
										</td>
										<td>
											<asp:Label ID="lbDirection" runat="server" style="text-align: center" Text="Dirección" Width="600px"></asp:Label>
										</td>
										<td rowspan="2">
										</td>
									</tr>
									<tr>
										<td>
											<asp:Label ID="lbTime" runat="server" style="text-align: center" Text="Fecha" Width="100px"></asp:Label>
										</td>
										<td>
											<telerik:RadButton ID="btnPlayPause" runat="server" ButtonType="ToggleButton" Checked="false" Height="32px" OnClientCheckedChanged="playStopSlideMovement" ToggleType="CheckBox" Width="32px" AutoPostBack="False" Enabled="False">
												<ToggleStates>
													<telerik:RadButtonToggleState ImageUrl="../Template/Icons/32px/Button-Play-icon.png" Text="Play" />
													<telerik:RadButtonToggleState ImageUrl="../Template/Icons/32px/Button-Pause-icon.png" Selected="true" Text="Pause" />
												</ToggleStates>
											</telerik:RadButton>
										</td>
									</tr>
								</table>
                                                                            
							</fieldset>
                                                                        
						</td>
					</tr>
				</table>
            </telerik:RadPageView>
        </telerik:RadMultiPage>

        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>
